<template>
  <div>

    <el-table :data="tableData" v-if="tableData" class="ps_table_header" border>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="ProdID"
        label="子件编号"
      ></el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="ProdName"
        label="子件名称"
      ></el-table-column>
      <el-table-column
        align="center"
        min-width="160"
        show-overflow-tooltip
        prop="ProdSize"
        label="规格型号"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="Unit"
        label="单位"
      ></el-table-column>
      <el-table-column
        align="center"
        width="90"
        prop="Quantity"
        label="生产应用量"
      ></el-table-column>
      <el-table-column
        align="center"
        width="90"
        prop="CanTakeQty"
        label="允领量"
      ></el-table-column>
      <el-table-column
        align="center"
        width="90"
        prop="TakeMatQty"
        label="已领数量"
      ></el-table-column>
      <el-table-column align="center" width="90" label="未领数量">
        <template #default="scope">
          {{ scope.row.CanTakeQty - scope.row.TakeMatQty }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="WestingRate"
        label="损耗率(%)"
      ></el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="ItemRemark"
        label="分录备注"
      ></el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      v-model:current-page="page.pageCurrent"
      background
      layout="prev, pager, next,total"
      :total="page.total"
      v-model:page-size="page.pageSize"
    />
  </div>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue'
const tableData = ref([])
const allData = ref([])
const order = ref({})

const props = defineProps({
  data: Array,
  total: Number,
  BillNO: String
})

const page = ref({
  pageSize: 10,
  pageCurrent: 1,
  total: 0
})

const updataTableData = () => {
  tableData.value = allData.value.slice(
    (page.value.pageCurrent - 1) * page.value.pageSize,
    page.value.pageSize * page.value.pageCurrent
  )
}

watch(
  () => page.value.pageCurrent,
  () => {
    updataTableData()
  }
)

watchEffect(() => {
  

  allData.value = props.data
  page.value.total = props.total
  updataTableData()
})
</script>

<style scoped lang="scss">
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  text-align: center;
}
</style>
